<template>
    <div>
        <el-carousel :interval="2000" type="card" height="300px">
            <el-carousel-item>
                <img src="@/assets/login/1.png" alt="">
            </el-carousel-item>
            <el-carousel-item>
                <img src="@/assets/login/2.png" alt="">
            </el-carousel-item>
            <el-carousel-item>
                <img src="@/assets/login/3.png" alt="">
            </el-carousel-item>
            <el-carousel-item>
                <img src="@/assets/login/4.png" alt="">
            </el-carousel-item>
        </el-carousel>
        <el-card class="box-card" >
            <h3 class="current-exam">最近的考试</h3>
            <hr>
            <el-card v-if="examData.length <= 0" class="no-exam" shadow="never">
                最近暂无考试
            </el-card>
            <el-card class="card-option" shadow="hover" v-for="item in examData" :key="item.id">
                <h4>{{ item.examName}}</h4>
                <p class="exam-option">学科：{{ item.subjectName}}</p>
                <p class="exam-option">开考时间：{{ item.beginTime}}</p>
                <p class="exam-option">结束时间：{{ item.endTime}}</p>
                <p class="exam-option">题目量：{{ item.questionSum}}</p>
                <p class="exam-option">总分：{{ item.examTotal}}</p>
                <p class="exam-option">考试时长：{{ item.examTime}}</p>
                <p style="padding-top: 30px; margin-left: 150px;">
                    <router-link :to="{name: 'ExamPaper' , 
                        params:{id: item.id,subjectName:item.subjectName,examTotal:item.examTotal,endTime:item.endTime,examTime:item.examTime}}" 
                        v-if="item.isfinished == 1 && item.completed == false">前往考试
                    </router-link>
                    <span v-if="item.isfinished == 1 && item.completed == true" style="font-size: 14px;color: rgb(76, 242, 76);">已完成</span>
                    <span v-if="item.isfinished == 0" style="font-size: 14px;color: gray;">未开始</span>
                </p>
            </el-card>
        </el-card>
        <el-card class="box-card" shadow="hover" style="margin-top:20px">
            <h3 class="current-exam" style="border-left: 10px solid goldenrod;">近七次考试成绩</h3>
            <hr>
            <el-row>
                <el-col :span="18">
                    <scoreChart v-if="flag" :Xdata="Xdata" :Ydata="Ydata"></scoreChart>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>

import scoreChart from '@/components/charts/scoreChart'
import scorePie from '@/components/charts/scorePie';

import { recentExam,chartData } from '@/api/dashboard';
export default {
    name:'DashBoard',
    components:{
        scoreChart,
        scorePie
    },
    data(){
        return{
            // 最近放入考试
            examData:[],
            //成绩列表的XData
            Xdata:[],
            //Y轴的数据
            Ydata:[],
            flag:false
        }
    },
    methods:{
        async getRecentExam(){
            let res = await recentExam();
            this.examData = res.data;
        }
    },
    mounted(){
        // 得到最近的考试
        this.getRecentExam();

        chartData().then(resp =>{
            this.Xdata = resp.data.xdata;
            this.Ydata = resp.data. ydata;
            this.flag = true;
        })
    }
}
</script>

<style scoped>
    *{
        padding: 0px;
        margin: 0px;
    }
    a{
        text-decoration: none;
        font-size: 14px;
        color: #409Eff;
    }
    .current-exam{
        height: 40px;
        padding-left: 10px;
        line-height: 35px;
        border-left: 10px solid red;
        margin-bottom: 15px;
        text-align: left;
    }
    .exam-option{
        text-align: left;
        padding: 10px 0px 5px 10px;
        font-family: '宋体';

    }
    .card-option{
        height: 330px; 
        width: 305px; 
        float: left;
        margin: 10px 6px 10px 6px;
    }
    .card-option:hover{
        background: rgb(232, 237, 239);
        transition: 3s;
    }
    .box-card{
        width: 88%;
        margin: 0px auto;
    }
    hr{
        background: gray;
    }
    img{
        height: 300px;
        width: 100%;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }
    
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .no-exam{
        border: none;
        color: gray;
        padding: 80px;
        font-size: 25px;
        font-family: '楷体';
    }
    .card-option:hover{
        background-image: url('@/assets/img/6.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

</style>